import { Card, Col, Row, Statistic, Typography, Button } from 'antd';
import { ScheduleOutlined, ClockCircleOutlined, RocketOutlined, SettingOutlined } from '@ant-design/icons';
import { history } from 'umi';

const { Title, Paragraph } = Typography;

export default function HomePage() {
  return (
    <div style={{ padding: '24px' }}>
      <Card 
        style={{ 
          marginBottom: '24px', 
          borderRadius: '8px',
          backgroundImage: 'linear-gradient(135deg, #1890ff 0%, #096dd9 100%)',
          color: '#fff'
        }}
        bodyStyle={{ padding: '24px' }}
      >
        <Title level={2} style={{ color: '#fff', marginBottom: '16px' }}>
          欢迎使用菜牛任务调度系统
        </Title>
        <Paragraph style={{ color: 'rgba(255, 255, 255, 0.85)', fontSize: '16px', marginBottom: '24px' }}>
          高效、可靠的分布式任务调度平台，帮助您轻松管理和监控各类定时任务
        </Paragraph>
        <div>
          <Button 
            type="primary" 
            size="large" 
            ghost 
            style={{ marginRight: '16px' }} 
            onClick={() => history.push('/tasks')}
          >
            <ScheduleOutlined /> 任务管理
          </Button>
          <Button 
            type="primary" 
            size="large" 
            ghost
            onClick={() => history.push('/executors')}
          >
            <SettingOutlined /> 执行器配置
          </Button>
        </div>
      </Card>
      
      <Row gutter={24}>
        <Col xs={24} sm={12} md={8} lg={8} xl={8} style={{ marginBottom: '24px' }}>
          <Card hoverable>
            <Statistic 
              title="任务调度" 
              value="高效可靠" 
              prefix={<ScheduleOutlined style={{ color: '#1890ff' }} />} 
              valueStyle={{ color: '#1890ff' }}
            />
            <Paragraph style={{ marginTop: '16px' }}>
              支持多种调度策略，确保任务按时执行，提供完善的失败重试机制
            </Paragraph>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={8} xl={8} style={{ marginBottom: '24px' }}>
          <Card hoverable>
            <Statistic 
              title="实时监控" 
              value="全面透明" 
              prefix={<ClockCircleOutlined style={{ color: '#52c41a' }} />} 
              valueStyle={{ color: '#52c41a' }}
            />
            <Paragraph style={{ marginTop: '16px' }}>
              实时查看任务执行状态和日志，快速定位问题，保障系统稳定运行
            </Paragraph>
          </Card>
        </Col>
        <Col xs={24} sm={12} md={8} lg={8} xl={8} style={{ marginBottom: '24px' }}>
          <Card hoverable>
            <Statistic 
              title="分布式架构" 
              value="弹性扩展" 
              prefix={<RocketOutlined style={{ color: '#722ed1' }} />} 
              valueStyle={{ color: '#722ed1' }}
            />
            <Paragraph style={{ marginTop: '16px' }}>
              支持多执行器集群部署，灵活应对业务增长，确保系统高可用
            </Paragraph>
          </Card>
        </Col>
      </Row>
    </div>
  );
}
